<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加至我的联系人</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <style>
        .container-fluid {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>

</head>
<body>

<header th:include="index.html::top"></header>

<div class="container-fluid">
    <form action="/doAddressBook/addNewContact" method="post">
        <h3>添加至我的联系人</h3>
        <div class="input-group" style="display: none">
            <label for="ID">ID：</label>
            <input type="text" class="form-control" id="ID" name="id" readonly required>
        </div>
        <div class="input-group">
            <label for="name">姓名：</label>
            <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名" required>
        </div>
        <div class="input-group">
            <label for="phone">电话号码：</label>
            <input type="tel" class="form-control" id="phone" name="phoneNumber" placeholder="请输入电话号码" required>
        </div>
        <div class="input-group">
            <label for="birthday">生日：</label>
            <input type="date" class="form-control" id="birthday" name="birthday" required>
        </div>
        <div class="input-group">
            <label for="address">家庭住址：</label>
            <input type="text" class="form-control" id="address" name="address" placeholder="请输入家庭住址" required>
        </div>
        <div class="input-group">
            <label for="school">学校：</label>
            <input type="text" class="form-control" id="school" name="school" placeholder="请输入学校" required>
        </div>
        <div class="input-group">
            <label for="qq">QQ号码：</label>
            <input type="text" class="form-control" id="qq" name="qq" placeholder="请输入QQ号码" required>
        </div>
        <div class="input-group">
            <label for="email">邮箱：</label>
            <input type="email" class="form-control" id="email" name="email" placeholder="请输入邮箱" required>
        </div>
        <div class="input-group" id="customTagGroup">
            <label for="customTag">备注：</label>
            <input type="text" class="form-control" name="label" id="customTag" placeholder="请输入备注" required>
        </div>

        <div class="btn-group">
            <button type="submit" class="btn btn-primary">提交</button>
            <button type="button" class="btn btn-danger" onclick="window.history.back()">取消</button>
        </div>
    </form>
</div>

<script>
    // 获取URL参数
    const urlParams = new URLSearchParams(window.location.search);
    const id = urlParams.get('id');
    $('#userWelcome').append("<p>"+"欢迎，"+localStorage.getItem('welcome')+"</p>");

    $.ajax({
        url:'/allUserInfo/id/' + id,
        type: "GET",
        dataType: "json",
        success: function (response) {

            const serverDate = response.birthday;
            const formattedDate = new Date(serverDate).toISOString().split('T')[0];

            $('#ID').val(response.id);
            $('#name').val(response.name);
            $('#phone').val(response.phoneNumber);
            $('#birthday').val(formattedDate);
            $('#address').val(response.address);
            $('#school').val(response.school);
            $('#qq').val(response.qq);
            $('#email').val(response.email);
            $('#customTag').val(response.label);
        },
        error() {
            alert("处理异常，服务中断！");
        }
    });
</script>
</body>
</html>